<template>
  <div>
    <a-modal
      v-model:open="modalOpen"
      title="申请类目"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          ref="formRef"
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="商品类目"
            name="typeId"
            :rules="[{ required: true, message: '请选择商品类目' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.typeId"
              placeholder="请选择商品类目"
              @change="handleChangeType"
            >
              <a-select-option
                v-for="item in goodsTypeList"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>

          <a-form-item
            label="子类目"
            name="subTypeId"
            :rules="[{ required: true, message: '请选择子类目' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.subTypeId"
              placeholder="请选择子类目"
            >
              <template
                v-if="
                  subcategoryList[0] &&
                  subcategoryList[0].childrenList.length > 0
                "
              >
                <a-select-option
                  v-for="item in subcategoryList[0].childrenList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </template>
            </a-select>
          </a-form-item>

          <a-form-item
            label="品 牌"
            name="brandName"
            :rules="[{ required: true, message: '品牌不能为空!' }]"
          >
            <a-input
              v-model:value="formData.brandName"
              placeholder="输入品牌名称"
            />
          </a-form-item>

          <a-form-item
            label="商品名称"
            name="name"
            :rules="[{ required: true, message: '商品名称不能为空!' }]"
          >
            <a-input v-model:value="formData.name" placeholder="输入商品名称" />
          </a-form-item>

          <a-form-item
            label="发售价格"
            name="price"
            :rules="[{ required: true, message: '发售价格不能为空!' }]"
          >
            <a-input
              v-model:value="formData.price"
              type="number"
              placeholder="输入发售价格"
              prefix="￥"
              suffix="元"
            />
          </a-form-item>

          <a-form-item
            label="上传图片"
            name="img"
            ref="uploadImg"
            :rules="[{ required: true, message: '请上传商品图片!' }]"
          >
            <div class="img-item">
              <a-upload
                name="avatar"
                accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="null"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <img
                  style="width: 102px; height: 102px"
                  v-if="formData.img"
                  :src="formData.img"
                  alt="avatar"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                </div>
              </a-upload>
              <div class="img-label">仅支持上传.jpg.png格式</div>
            </div>
          </a-form-item>

          <a-form-item label="外网链接">
            <a-input
              v-model:value="formData.linkUrl"
              placeholder="请输入外网销售链接"
            />
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="confirm"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="handleSubmit">提交</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { passGoodsApply } from "@/api/goods";
import { singleUploadsFile } from "@/api/upload";
const modalOpen = ref(false);
const formData = ref({
  subTypeId: undefined,
  brandName: undefined,
  typeId: undefined,
  name: undefined,
  price: undefined,
  id: undefined,
  img: undefined,
  linkUrl: undefined,
});
const formRef = ref(null);
const goodsTypeList = ref([]);
const goodsFinenessList = ref([]);
const subcategoryList = ref([]);
function handleChangeType(val) {
  formData.value.subTypeId = undefined;
  subcategoryList.value = goodsTypeList.value.filter(
    (value) => value.id == val
  );
}
const open = (goodsTypeLists, goodsFinenessLists, formDatas) => {
  goodsTypeList.value = goodsTypeLists;
  goodsFinenessList.value = goodsFinenessLists;
  if (formDatas) {
    nextTick(() => {
      formRef.value.resetFields();
      formData.value = Object.assign({}, formDatas);
    });
    subcategoryList.value = goodsTypeList.value.filter(
      (value) => value.id == formData.value.typeId
    );
  }
  modalOpen.value = true;
};

const emits = defineEmits(["refreshList"]);
const handleSubmit = async () => {
  formData.value.coverPic = formData.value.img;
  delete formData.value.img;
  const result = await passGoodsApply(formData.value);
  if (result.code == 200) {
    modalOpen.value = false;
    emits("refreshList");
  }
};
function confirm() {
  formData.value = {
    categoryId: undefined,
    brandName: undefined,
    typeId: undefined,
    name: undefined,
    price: undefined,
    id: undefined,
    img: null,
    linkUrl: undefined,
  };
}
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const loading = ref(false);
const uploadImg = ref(null);
const handleChange = (file) => {
  loading.value = true;
  let formState = new FormData();
  formState.append("file", file.file);
  formState.append("type", "1");
  singleUploadsFile(formState).then((res) => {
    if (res.code == 200) {
      loading.value = false;
      formData.value.img = res.data;
      uploadImg.value.clearValidate();
    }
  });
};
defineExpose({ modalOpen, open });
</script>

<style lang="less">
.img-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}

.modal-but-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
